<template>
  <van-overlay
    :show="visible"
    class="flex justify-center items-center pointer-events-none pos-relative"
    :custom-style="{
      background: 'transparent'
    }"
  >
    <div class="real-time-data-dialog pointer-events-auto" v-drag>
      <div class="header bg-red flex justify-between drag-header">
        <div class="flex items-center gap-2">
          <svg-icon name="实时数据"></svg-icon>
          <span>{{ $t("page.game_modal.real_time_statistics") }}</span>
        </div>
        <div class="flex gap-2">
          <svg-icon
            v-if="false"
            name="Refresh"
            class="cursor-pointer"
            @click="handleRefresh"
          ></svg-icon>
          <van-icon class="cursor-pointer" name="cross" @click="handleClose" />
        </div>
      </div>
      <div class="content flex flex-col gap-2">
        <div
          class="w-full h-[120px] bg-[#0f212e] rounded-[12px] p-[16px] flex gap-1"
        >
          <div class="statistic-card">
            <div class="statistic">
              <span class="text-[#b1bad3] font-700 lh-[1.5] text-[0.875rem]">{{
                $t("page.game_modal.profit")
              }}</span>
              <div class="currency">
                <span class="content text-[0.875rem]"
                  ><span>{{ reportData.bet_profit_total }}</span></span
                >
                <span></span>
              </div>
            </div>
            <div class="statistic">
              <span class="text-[#b1bad3] font-700 lh-[1.5] text-[0.875rem]">{{
                $t("page.game_modal.total_bets")
              }}</span>
              <div class="currency">
                <span class="content text-[0.875rem]"
                  ><span class="text-[0.875rem]">{{
                    reportData.bet_amount_total
                  }}</span></span
                >
                <span></span>
              </div>
            </div>
          </div>
          <div class="divider"></div>
          <div class="statistic-card">
            <div class="statistic">
              <span class="text-[#b1bad3] font-700 lh-[1.5] text-[0.875rem]">{{
                $t("page.game_modal.win")
              }}</span>
              <span class="text-[#00e701]">{{ reportData.bet_win_count }}</span>
            </div>
            <div class="statistic">
              <span class="text-[#b1bad3] font-700 lh-[1.5] text-[0.875rem]">{{
                $t("page.game_modal.loss")
              }}</span>
              <span class="text-red-500">{{ reportData.bet_lose_count }}</span>
            </div>
          </div>
        </div>
        <div class="w-full bg-[#0f212e] rounded-[12px] p-[16px] flex flex-col">
          <div class="flex justify-between w-full">
            <div class="flex-1 flex font-700">
              {{ $t("page.game_modal.bet_amount") }}
            </div>
            <div class="flex-1 flex justify-end font-700">
              {{ $t("page.game_modal.win_loss") }}
            </div>
          </div>
          <div
            class="flex justify-between w-full"
            v-for="(item, i) in reportListData"
            :key="i"
          >
            <div class="flex-1 flex text-[#b1bad3] lh-[1.5] text-[0.875rem]">
              {{ item.bet_amount }}
            </div>
            <div
              class="flex-1 flex justify-end text-[#b1bad3] lh-[1.5] text-[0.875rem]"
              :class="item.profit > 0 ? 'text-[#00e745]' : ''"
            >
              {{ item.profit }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { eventBus } from "@/utils/eventBus";

import { mainAct } from "@/store/activeda";
defineOptions({
  name: "realTimeDataDialog"
});

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits();

const handleClose = () => {
  emit("close");
};

const handleRefresh = () => {
  emit("refresh");
};

const main = mainAct();
const reportData = ref({});
const reportListData = ref({});

onMounted(() => {
  eventBus.on("user_game_report", data => {
    console.log("⬇⬇   ---> user_game_report 接收到消息 <---   ⬇⬇", data);
    reportData.value = data.report;
    reportListData.value = data.record_list;
  });
});
</script>

<style scoped lang="less">
// 手机
@media (max-width: 750px) {
  .real-time-data-dialog {
    position: relative !important;
  }
}

.real-time-data-dialog {
  position: absolute;
  right: 0;
  min-width: 280px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: #213743;
  .header {
    padding: 16px;
    font-size: 16px;
    color: #fff;
    background: #1a2c38;
  }

  .content {
    padding: 12px 16px;
  }
}

.divider {
  background: #213743;
  width: 2px;
  display: flex;
  margin: 0 12px;
}

.statistic-card {
  flex: 1;
}

.statistic {
  display: flex;
  flex-direction: column;
}
</style>
